import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { BROWSER_MODE } from 'Constants/webConstants';
import './index.scss';

/**
 * 组件： 互动平台详情
 */
class Article extends React.PureComponent {
  static propTypes = {
    title: PropTypes.string.isRequired,
    content: PropTypes.element.isRequired,
  };
  render() {
    const { title, content, mode } = this.props;
    const isVertical = BROWSER_MODE.isVertical(mode);
    if (isVertical) {
      return (
        <div className="v-article-detail-wrap">
          <div className="vertical-article-detail-wrap">
            <div className="article-header">
              <div className="article-wrap">
                <div className="title">{title || ''}</div>
              </div>
            </div>
            <div className="content-wrap">
              <div className="article-content">
                {
                  content || ''
                }
              </div>
            </div>
          </div>
        </div>
      );
    }
    return (
      <div className="article-detail-wrap">
        <div className="article-header">
          <div className="article-wrap">
            <div className="title">{title || ''}</div>
          </div>
        </div>
        <div className="content-wrap">
          <div className="article-content">
            {
              content || ''
            }
          </div>
        </div>
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {
    ...state.webReducer
  };
}
export default connect(mapStateToProps)(Article);
